<template>
    <div class="bg_write"
        style="position:relative">
        <el-row>
            <el-col :span="24"
                class="content_title">
                <el-col :span="12">
                    <HeadTitle></HeadTitle>
                </el-col>
                <el-col :span="12"></el-col>
            </el-col>
        </el-row>
        <el-row class="home">
            <el-col :span="24"
                class="home_box">
                <div class="phone">
                    <div class="phone_top"
                        style="height:auto">
                        <div class="phone_header"
                            @click="show_btn(1)">
                            <p v-if="topList.title">{{topList.title}}</p>
                            <img src="./../../assets/img/home/phone_header.png"
                                alt />
                        </div>

                        <div class="phone_top_img"
                            @click="show_btn(2)"
                            :style="{'background': headList.banner&&headList.banner.length == 0?'#f4f4f4':'url('+$fnc.getImgUrl(headList.banner[0].piclink)+') no-repeat center top/100% 100% '}">
                            <div class="phone_top_img_p">
                                <p><i class="el-icon-arrow-left"></i>{{topList.title}}</p>
                                <p><i class="el-icon-user-solid"></i>个人中心</p>
                            </div>
                            <div class="index_control index_head"
                                v-show="search_show">
                                <div class="control_item control_sanjiao on"
                                    style="margin-top:70px"
                                    v-show="search_show">
                                    <el-form>
                                        <el-form-item label="网站标题"
                                            :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-input v-model="topList.title"
                                                    autocomplete="off"></el-input>
                                            </el-col>
                                        </el-form-item>

                                    </el-form>
                                    <el-form>
                                        <el-form-item label="背景图片："
                                            :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <uploadpic
                                                    :piclink="headList.banner[0].piclink ||''"
                                                    :width="300"
                                                    :height="160"
                                                    :real_width="640"
                                                    :real_height="344"
                                                    :is_more="false"
                                                    @send_pic="loadSuccess_bj"></uploadpic>
                                            </el-col>
                                        </el-form-item>

                                    </el-form>
                                </div>
                            </div>
                        </div>
                        <div class="carousel">
                            <div class="block"
                                style="z-index: 10"
                                @click="show_btn(3)">
                                <el-carousel trigger="click"
                                    height="180px"
                                    style="z-index: 10;">
                                    <el-carousel-item v-for="(item,index) in bannerList.banner"
                                        style="width:60%"
                                        :key="index">
                                        <img :src="$fnc.getImgUrl(item.piclink)"
                                            alt />
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div class="index_control index_head"
                                v-show="carousel_show"
                                style="margin-top: 180px">
                                <div class="control_item control_sanjiao on">
                                    <el-form>
                                        <el-form-item label="栏目是否显示"
                                            :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-switch v-model="bannerList.is_show"
                                                    active-color="#13ce66"
                                                    inactive-color="#999999"
                                                    class="hone_switch"
                                                    :width="70"
                                                    active-value="1"
                                                    inactive-value="0"></el-switch>
                                            </el-col>
                                            <el-col :span="12"
                                                class="tr pd_right_15 sizeColor_red"></el-col>
                                        </el-form-item>
                                        <el-form-item label="建议尺寸"
                                            :label-width="formLabelWidth">
                                            <p style="text-align:left">678 * 357</p>

                                        </el-form-item>
                                        <upcard class="banner banner"
                                            @sendDel="getSendDel"
                                            @send_baner_id="get_banner_id"
                                            :data="bannerList.banner"
                                            :cart="list_card"></upcard>
                                    </el-form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="phone_menu"
                        @click="show_btn(4)">
                        <div class="phone_menu_body">
                            <div class="phone_menu_item"
                                :style="{width:(menuList.style?100/menuList.style+'%':'20%')}"
                                v-for="(item,i) in menuList.banner"
                                :key="i">
                                <div class="phone_menu_item_icon">
                                    <img :src="$fnc.getImgUrl(item.piclink)"
                                        alt />
                                </div>
                                <span>{{item.title}}</span>
                            </div>
                        </div>
                        <div class="index_control index_head"
                            v-show="menu_show">
                            <div class="control_item control_sanjiao on">
                                <el-form>
                                    <el-form-item label="栏目是否显示"
                                        :label-width="formLabelWidth">
                                        <el-col :span="12">
                                            <el-switch v-model="menuList.is_show"
                                                active-color="#13ce66"
                                                inactive-color="#999999"
                                                class="hone_switch"
                                                :width="70"
                                                active-value="1"
                                                inactive-value="0"></el-switch>
                                        </el-col>
                                        <el-col :span="12"
                                            class="tr pd_right_15 sizeColor_red"></el-col>
                                    </el-form-item>
                                    <el-form-item label="选择栏目个数"
                                        :label-width="formLabelWidth">
                                        <el-col :span="12">
                                            <el-select v-model="menuList.style"
                                                placeholder="请选择个数"
                                                @change="changeMenu">
                                                <el-option label="一行五个"
                                                    value="5"></el-option>
                                                <el-option label="一行四个"
                                                    value="4"></el-option>
                                                <el-option label="一行三个"
                                                    value="3"></el-option>
                                            </el-select>
                                        </el-col>
                                    </el-form-item>
                                    <upcard class="menu"
                                        @sendDel="getSendDel"
                                        @send_baner_id="get_banner_id"
                                        :data="menuList.banner"
                                        :cart="list_menu"
                                        :is_index="true"></upcard>
                                </el-form>
                            </div>
                        </div>
                    </div>

                    <all-module-item @show_btn="show_btn"
                        @getSendDel="getSendDel"
                        @del_banner="get_banner_id"
                        @del_part="del_part"
                        :partListCon="partList" /> -->

                    <!-- <div class="phone_news"
                        @click="show_btn(9)">
                        <div class="phone_news_body">
                            <div class="phone_title_lesson">
                                <div class="phone_title_left">
                                    <p>{{homeis_show_new_title}}</p>
                                </div>
                            </div>
                            <div class="phone_course_content">
                                <div class="news_list_item"
                                    v-for="(item,i) in this.news_form.newslist.data"
                                    :key="i">
                                    <div class="news_list_item_left">
                                        <p>{{item.title}}</p>
                                        <div class="news_list_item_other">
                                            <span>
                                                <van-icon
                                                    style="font-size: 16px; padding-right: 5px"
                                                    name="eye-o" />
                                                {{item.hit}}
                                            </span>
                                            <span>{{item.created_time |getTimeFormat}}</span>
                                        </div>
                                    </div>
                                    <div class="news_list_item_right">
                                        <img :src="$fnc.getImgUrl(item.piclink)"
                                            alt />
                                    </div>
                                </div>
                            </div>
                            <div class="index_control index_head"
                                v-show="newsshow">
                                <div class="control_item control_sanjiao on">
                                    <el-form>
                                        <el-form-item label="栏目是否显示"
                                            :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-switch v-model="news_form.pageis_show_new"
                                                    active-color="#13ce66"
                                                    inactive-color="#999999"
                                                    :width="70"
                                                    class="hone_switch"
                                                    active-value="1"
                                                    inactive-value="0"></el-switch>
                                            </el-col>
                                            <el-col :span="12"
                                                class="tr pd_right_15 sizeColor_red"></el-col>
                                        </el-form-item>

                                        <el-form-item label="新闻标题"
                                            :label-width="formLabelWidth">
                                            <el-col :span="12">

                                                <el-input size="small"
                                                    clearable
                                                    placeholder="请输入新闻标题"
                                                    v-model="homeis_show_new_title"></el-input>
                                            </el-col>
                                        </el-form-item>

                                        <el-form-item label="资讯分类选择"
                                            :label-width="formLabelWidth">
                                            <el-col :span="12">
                                                <el-cascader :options="news_cate"
                                                    @change="sel_cate"
                                                    :props="optionProps"
                                                    :show-all-levels="false"
                                                    v-model="news_form.pageis_show_new_cate"
                                                    size="small"
                                                    change-on-select
                                                    placeholder="请选择资讯分类"
                                                    clearable></el-cascader>
                                            </el-col>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </div>
                        </div>
                    </div> -->

                    <div class="phone_shop"
                        @click="show_btn(6)">
                        <div class="phone_shop_body">
                            <div class="phone_title_shop">
                                <div class="phone_title_left">
                                    <p>
                                        精选主播
                                    </p>
                                </div>
                                <div class="phone_title_right">
                                    <p class="phone_subtitle">More +</p>
                                </div>
                            </div>

                            <div class="phone_shop_content">
                                <div class="live_index_live_body">
                                    <div class="live_index_live_item_box"
                                        v-for="(item,i) in recommendlist"
                                        :key="i">
                                        <div class="live_index_live_item">
                                            <div class="live_index_live_item_img">
                                                <img :src="$fnc.getImgUrl(item.cover)"
                                                    alt="">
                                                <span>
                                                    <van-icon name="like-o" />
                                                    {{item.attention || 0}}
                                                </span>
                                            </div>
                                            <div class="live_index_live_item_content">
                                                <div class="live_index_live_item_content_left">
                                                    <p>{{item.title}}</p>
                                                    <div>
                                                        <img :src="$fnc.getImgUrl(item.avatar)"
                                                            alt="">
                                                        <p>{{item.nickname != ''?item.nickname :item.username}}
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="live_index_live_item_content_right">
                                                    <img :src="$fnc.getImgUrl(item.pro.piclink)"
                                                        alt="">
                                                    <span>￥{{$fnc.toFixedZ(item.pro.price)}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="phone_bottom"
                        @click="show_btn(7)">
                        <div class="phone_bottom_box">
                            <div class="phone_bottom_item"
                                v-for="footer in footerList"
                                :key="footer.id">
                                <div class="phone_bottom_item_img">
                                    <van-icon :name="footer.piclink" />
                                </div>
                                <p>{{footer.title}}</p>
                            </div>
                        </div>
                        <div class="index_control index_head"
                            v-show="footer_show">
                            <div class="control_item control_sanjiao on">
                                <el-form>
                                    <el-col :span="12"></el-col>
                                    <upcard class="footer"
                                        @sendDel="getSendDel"
                                        @send_baner_id="get_banner_id"
                                        :data="footerList"
                                        :cart="list_footer"
                                        :is_index="true"></upcard>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-col :span="22"
            class="men_add">
            <el-card shadow="always">
                <el-button :loading="$store.state.isLoading"
                    @click="save"
                    @keydown.13="save">保存</el-button>
            </el-card>
        </el-col>
    </div>
</template>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import upcard from "@/components/currency/IndexSet_upload.vue";
import uploadpic from "@/components/page/pic/up_pic";
import oneShop from "@/components/currency/page/one-shop.vue";
import allModuleItem from "@/components/currency/page/all-module-item/all-module-item";
export default {
    name: "new_home",
    components: {
        HeadTitle,
        upcard,
        uploadpic,
        oneShop,
        allModuleItem
    },
    data () {
        return {
            recommendlist: [],
            optionProps: {
                value: "id",
                label: "title",
                children: "z"
            },
            header_iconList: [
                {
                    title: "",
                    id: ""
                },
                {
                    title: "",
                    id: ""
                }
            ],
            is_show_cate: "",
            copyright: "",
            homeis_show_new_title: "推荐新闻",
            action: this.$route.query.action,
            del_banner: "",
            del_module: "",
            list_footer: "list_footer",
            list_item: "list",
            list_menu: "list_menu",
            list_card: "list_card",
            menuListShow: 1,
            copyright_show: false,
            footer_show: false,
            shopListShow: false,
            ad_show: false,
            menu_show: false,
            carousel_show: false,
            search_show: false,
            header_show: false,
            news_cate: [],
            news_form: {
                newslist: [],
                pageis_show_new: "", // 是否显示新闻开关
                pageis_show_new_cate: "" // 显示的分类
            },
            newsshow: false,
            top_del: {
                del_top_banner: [],
                del_top_menu: [],
                del_top_brand: [],
                del_top_day: [],
                del_top_find: [],
                del_top_list: [],
                del_top_shopList: [],

                del_top_adv: []
            },
            style_option: [
                {
                    label: "1行1图",
                    value: "0"
                },
                {
                    label: "1行2图",
                    value: "1"
                },
                {
                    label: "1行3图",
                    value: "2"
                },
                {
                    label: "1+2",
                    value: "3"
                }
            ],
            del_item: {
                delbannerList: [],
                delmenuList: [],
                delshopList: [],
                delpartList: []
            },
            //商品详情
            shopList: {
                is_show: "1",
                title: null,
                title_en: null,
                types: "product",
                pro: [
                    {
                        title: ""
                    }
                ]
            },

            add_part_item: {
                id: "",
                is_show: "1",
                part_show: false,
                title: "主标题",
                title_en: "副标题",
                style: "0",
                types: "module",
                banner: [
                    {
                        id: "",
                        cate: null,
                        title: null,
                        piclink: "",
                        links: null,
                        show: "",
                        desc: ""
                    }
                ]
            },

            // 模块
            partList: [
                {
                    banner: [
                        {
                            piclink: "",
                            title: ""
                        }
                    ],
                    title: "",
                    title_en: ""
                }
            ],
            footerList: [
                {
                    title: "",
                    id: ""
                }
            ],
            //菜单选项
            menuList: {
                style: "25",
                banner: [
                    {
                        title: null,
                        piclink: null
                    }
                ]
            },
            //轮播图
            bannerList: {
                banner: [
                    {
                        id: null,
                        title: null,
                        piclink: null
                    }
                ]
            },

            //头部背景
            headList: {
                id: "",
                iden: "",
                is_show: "1",
                title: "",
                title_en: "",
                style: "0",
                types: "background",
                banner: [
                    {
                        id: "",
                        cate: "",
                        title: "",
                        piclink: "",
                        links: ""
                    }
                ]
            },

            //头部文件
            topList: {
                title: "",
                logo: ""
            },
            searchList: [
                { title: "" },
                { title: "" },
                { title: "" },
                { title: "" },
                { title: "" },
                { title: "" }
            ],
            search_input: "",
            formLabelWidth: "120px"
        };
    },
    created () {
        this.get_info();
        this.get_recommend();
        this.getNewFenLeiTree();
    },
    methods: {
        get_recommend () {
            this.$api.getPage.get_live_recommend({}).then(res => {
                if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
                    this.recommendlist = res.data.result;
                }
            });
        },
        getNewFenLeiTree () {
            var params = {};
            params.parent_id = "0";
            this.$api.getNewsFenlei.getNewsList(params).then(res => {
                if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
                    this.news_cate = res.data.result;
                }
            });
        },
        sel_cate (id) {
            console.log(id);
            if (id == undefined) return;
            console.log(22);
            this.news_form.pageis_show_new_cate = id[0];
            var params = {};
            params.cate_id = id[0];
            params.page = 1;
            params.page_size = 10;
            this.$api.getNews.getNewsList(params).then(res => {
                if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
                    this.news_form.newslist = res.data.result;
                }
            });
        },
        changeMenu (e) {
            this.$set(this.menuList, "style", e);
        },
        loadSuccess_bj (pic) {
            //上传图片
            if (this.headList.banner.length == 0) {
                this.headList.banner.push({ piclink: "" });
            }
            this.headList.banner[0].piclink = pic;
        },
        onSuccess_logo (pic) {
            this.topList.logo = pic;
        },
        get_banner_id (item) {
            if (item.id != 0 && item.id != undefined) {
                this.del_banner += item.id + "@";
            }
        },
        setId (od) {
            this.$api.getPage.change_shop({ id: od, iden: "live" }).then(res => { });
        },
        del_part (id, num) {
            //删除模块
            if (id != 0) {
                this.del_module += id + "@";
            }
        },
        add_part () {
            this.partList.push({
                id: "0",
                iden: "live",
                is_show: "1",
                part_show: false,
                title: "",
                title_en: "",
                style: "0",
                types: "module",
                sort: "0",
                banner: [
                    {
                        id: "",
                        cate: "",
                        title: "",
                        piclink: "",
                        links: "",
                        desc: "",
                        sort: "0"
                    }
                ]
            });
        },
        save () {
            var temp = {};
            temp.iden = "live";
            temp.head = this.topList.title;
            temp.logo = this.topList.logo;

            temp.background = JSON.stringify(this.headList);
            temp.slide = JSON.stringify(this.bannerList);
            temp.navigation = JSON.stringify(this.menuList);

            temp.module = JSON.stringify(this.partList);

            temp.homeis_show_new = this.news_form.pageis_show_new;
            temp.homeis_show_new_cate = this.news_form.pageis_show_new_cate;
            temp.homeis_show_new_title = this.homeis_show_new_title;

            var sort_str = "";
            var is_shop = false;
            if (this.shopList.pro != undefined && this.shopList.pro.length > 0) {
                is_shop = true;
                this.shopList.pro.forEach(item => {
                    sort_str = sort_str + item.id + "@";
                });
            }

            let shop_List = {};
            shop_List = this.shopList;
            shop_List.pro = [];
            temp.product = JSON.stringify(shop_List);

            temp.del_module = this.del_module;
            temp.del_banner = this.del_banner;
            temp.footer = JSON.stringify(this.footerList);
            temp.copyright = this.copyright;
            temp.is_show_cate = this.is_show_cate;
            temp.header = JSON.stringify(this.header_iconList);

            this.$api.getPage.changeindex(temp).then(res => {
                if (res.data.code == 200) {
                    if (is_shop == true) {
                        this.$api.getPage
                            .change_shopsort({ sort_str: sort_str })
                            .then(res => {
                                if (res.data.code == 200) {
                                    this.$fnc.alertSuccess("");
                                    this.get_info();
                                }
                            });
                    }
                }
            });
        },
        Initialize_array () {
            this.topList = { title: "", logo: "" };
            this.headList = {
                id: "",
                iden: "",
                is_show: "1",
                title: "",
                title_en: "",
                style: "0",
                types: "background",
                banner: [
                    { id: "", cate: "", title: "", piclink: "", links: "", desc: "" }
                ]
            };
            this.bannerList = { banner: [{ id: null, title: null, piclink: null }] };
            this.menuList = { banner: [{}], style: "25" };
            this.footerList = [];
            this.partList = [{ banner: [{ piclink: "" }] }];
            this.shopList = {
                is_show: "1",
                title: null,
                title_en: null,
                types: "product",
                pro: []
            };
        },
        get_info () {
            this.Initialize_array();
            this.$api.getPage.getindex({ iden: "live" }).then(res => {
                if (res.data.code == 200) {
                    this.topList.title = res.data.result.head;
                    this.topList.logo = res.data.result.logo;
                    this.headList = res.data.result.info.background || {
                        banner: [{ piclink: "" }]
                    };
                    if (this.headList.banner && this.headList.banner.length == 0) {
                        this.headList.banner.push({ piclink: "" });
                    }
                    this.bannerList = res.data.result.info.slide;
                    if (
                        res.data.result.info.navigation.style == undefined ||
                        res.data.result.info.navigation.style == "0"
                    ) {
                        res.data.result.info.navigation.style = "5";
                    }
                    this.menuList = res.data.result.info.navigation;
                    this.shopList = res.data.result.info.product;

                    this.partList = res.data.result.module;

                    this.footerList = res.data.result.footer;
                    this.searchList = res.data.result.product_cate;
                    this.copyright = res.data.result.copyright;
                    this.is_show_cate = res.data.result.is_show_cate;
                    this.header_iconList = [];
                    this.header_iconList.push(res.data.result.header[0]);
                    this.header_iconList.push(res.data.result.header[1]);
                    try {
                        this.news_form.pageis_show_new = res.data.result.homeis_show_new;
                        this.news_form.pageis_show_new_cate =
                            res.data.result.homeis_show_new_cate;

                        this.sel_cate(this.news_form.pageis_show_new_cate);

                        if (res.data.result.homeis_show_new_title) {
                            this.homeis_show_new_title =
                                res.data.result.homeis_show_new_title;
                        }
                    } catch (error) {
                        new Error("865");
                    }
                }
            });
        },
        homeAdd () {
            //写入数据库
        },
        judge (args, flag) {
            //奇偶数判断
            var odd = [];
            var even = [];
            var length = args.length || 0;
            for (var i = 0; i <= length - 1; i++) {
                if (i % 2 == 0) {
                    odd.push(i);
                } else {
                    even.push(i);
                }
            }
            if (flag == "odd") {
                return odd;
            } else {
                return even;
            }
        },
        getSendDel (obj, index, id) {
            console.log(obj);
            if (obj.id == 0 || obj.id == undefined) return;
            switch (obj.title) {
                case "banner":
                    this.del_item.delbannerList.push(obj.id);
                    break;
                case "menu":
                    this.del_item.delmenuList.push(obj.id);
                    break;
                case "shop":
                    this.del_item.delshopList.push(obj.id);
                    this.$api.getPage.del_shop({ id: obj.id }).then(res => { });
                    break;
                case "module":
                    this.del_item.delpartList.push(obj.id);
                    break;
                case "footer":
                    this.del_item.delpartList.push(obj.id);
                    break;
            }
        },

        del_headerbj () {
            //删除背景图片
            this.headList.piclink = "";
        },

        show_btn (id, Item) {
            //显示 修改窗口按钮
            this.search_show = false;
            this.header_show = false;
            this.carousel_show = false;
            this.menu_show = false;
            this.ad_show = false;
            this.newsshow = false;

            this.partList.forEach(function (item) {
                item.part_show = false;
            });
            this.shopListShow = false;
            this.footer_show = false;
            this.copyright_show = false;
            switch (id) {
                case 1:
                    this.header_show = true;
                    break;
                case 2:
                    this.search_show = true;
                    break;
                case 3:
                    this.carousel_show = true;
                    break;
                case 4:
                    this.menu_show = true;
                    break;
                case 5:
                    Item.part_show = true;
                    break;
                case 6:
                    this.shopListShow = true;
                    break;
                case 7:
                    this.footer_show = true;
                    break;
                case 8:
                    this.copyright_show = true;
                    break;
                case 9:
                    this.newsshow = true;
                    break;
            }
        }
    },
    watch: {
        //查询参数改变，再次执行数据获取方法
        $route (to, from) {
            this.Initialize_array();
            this.get_info();
        }
    },
    filters: {
        toFix (val) {
            return parseFloat(val).toFixed(2);
        }
    }
};
</script>

<style scoped lang='less'>
.home {
    padding: 20px 20px 22px;
    background: #fff;
    margin-bottom: 80px;
}
.home_box {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}
.phone {
    width: 375px;
    background-color: #f4f4f4;
    margin-left: 50px;
    margin-top: 50px;
    position: relative;
    border: 1px solid #e2e2e2;
}
.phone_top {
    width: 100%;
    /* height: auto !important; */
}
.phone_header {
    width: 100%;
    height: 75px;
    position: relative;
    border: 1px solid transparent;
}
.phone_header p {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 15px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
}
.phone_header img {
    width: 100%;
    /*z-index: 5;*/
}
.phone_header:hover,
.phone_header:active {
    border: 1px dashed red;
    cursor: pointer;
}

/**************顶部背景图片****************/
.phone_top_img {
    width: 100%;
    height: 120px;
    position: relative;
    cursor: pointer;
    border: 1px solid transparent;
}
.phone_top_img:hover {
    border: 1px dashed red;
}
.phone_top_img_p {
    width: 92%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #ffffff;
    margin: 10px auto;
    > p:nth-of-type(1) {
        font-size: 16px;
    }
    > p:nth-of-type(2) {
        font-size: 14px;
    }
}
.phone_top_search {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 6;
    padding-top: 10px;
}
.phone_top_search_left {
    width: 13%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
}
.phone_top_search_right {
    width: 13%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.phone_top_search_middle {
    width: 74%;
}
.phone_top_search_middle input {
    width: 95%;
    border: none;
    border-radius: 20px;
    text-indent: 12px;
}

.phone_top_search_middle i {
    font-size: 18px;
    color: #8b8b8b;
    line-height: 36px;
    text-indent: 16px;
    font-weight: bold;
}
.phone_top_search_left span,
.phone_top_search_right span {
    height: 14px;
    line-height: 14px;
    font-size: 12px;

    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.9);
}
.phone_top_search_i1 {
    /****有背景图样式 i*****/
    font-size: 22px;
    color: #000000;
    z-index: 10;
}
.phone_top_search_i2 {
    /****有背景图样式 i*****/
    font-size: 22px;
    color: #ffffff;
    z-index: 10;
    width: 30px;
}
.phone_top_search_span1 {
    /**** 有背景图样式 span*****/
    color: #000000;
    z-index: 10;
}
.phone_top_search_span2 {
    /**** 有背景图样式 span*****/
    color: #ffffff;
    z-index: 10;
}
.phone_top_search_icon {
    color: #000;
}

.phone_top_search_red {
    width: 30px;
}
.phone_top_search_red img {
    width: 100%;
}
/**************热搜关键词*************/
.phone_top_word {
    width: 90%;
    margin: 0 auto;
    z-index: 6;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    padding: 25px 0;
}
.phone_top_word_p1 {
    font-size: 14px;
    color: #000000;
    z-index: 6;
}
.phone_top_word_p2 {
    width: 10%;
    font-size: 14px;
    color: #ffffff;
    z-index: 6;
}

.phone_top_word > div {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
}
.phone_top_word > div > div {
    width: 200%;
    height: 20px;
    position: absolute;
    left: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* for Chrome */
.phone_top_word > div > div::-webkit-scrollbar {
    display: none;
}
.phone_top_word span {
    font-size: 12px;
    color: #fff;
    padding: 3px 12px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 6;
    margin-right: 5px;
}
/***************轮播图**********************/
.carousel {
    width: 94%;
    height: 180px;
    left: 0;
    right: 0;
    margin: -50px auto 0 auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    z-index: 10;
    border: 1px solid transparent;
}
.carousel:hover {
    border: 1px dashed red;
}
.carousel img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.phone_menu {
    width: 94%;
    margin: 15px auto 0 auto;
    background-color: #fff;
    border-radius: 5px;
    height: auto;
    z-index: 10;
    padding: 0;
    position: relative;
    border: 1px solid transparent;
}
.phone_menu:hover {
    border: 1px dashed red;
}

.phone_menu_body {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.phone_menu_item {
    width: 20%;
    height: 70px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    cursor: pointer;
}
.phone_menu_item_icon {
    height: 60%;
}
.phone_menu_item_icon img {
    height: 100%;
}
.phone_menu_item span {
    font-size: 12px;
    color: #333333;
    padding-bottom: 5px;
}

.phone_part {
    width: 100%;
    background-color: white;
    margin: 10px 0;
    position: relative;
    border: 1px solid transparent;
}
.phone_part_body {
    width: 94%;
    margin: 0 auto;
}
.phone_part:hover {
    border: 1px dashed red;
}
.phone_title {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.phone_title p {
    font-size: 20px;
    color: #2f2f2f;
    font-weight: bold;
    padding: 5px 0;
}
.phone_title span {
    font-size: 14px;
    color: #d4d4d4;
    font-weight: 400;
}
.phone_part_content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.phone_part_one_img {
    width: 100%;
    padding-bottom: 10px;
}
.phone_part_one_img a {
    display: block;
}
.phone_part_one_img img {
    width: 100%;
    border-radius: 8px;
    display: block;
}
.phone_part_two_content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.phone_part_two_img {
    width: 48%;
    padding: 5px 0;
}
.phone_part_two_img img {
    width: 100%;
    border-radius: 8px;
}
.phone_part_three_content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.phone_part_three_img {
    width: 32%;
    padding: 5px 0;
}
.phone_part_three_img img {
    width: 100%;
    border-radius: 8px;
}
.phone_part_four_img:nth-of-type(3n + 1) {
    width: 100%;
    border-radius: 8px;
    padding: 5px 0;
}

.phone_part_four_img:nth-of-type(3n + 2),
.phone_part_four_img:nth-of-type(3n + 3) {
    width: 48%;
    border-radius: 8px;
    padding: 5px 0;
}
.phone_part_four_img img {
    width: 100%;
    border-radius: 8px;
}
.phone_part_five_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 300px;
}
.phone_part_five_left {
    width: 49%;
    height: 100%;
    border-radius: 8px;
}
.phone_part_five_left_img {
    width: 100%;
    height: 100%;
    padding: 5px 0;
}
.phone_part_five_right {
    width: 49%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
}
.phone_part_five_right_img {
    width: 100%;
    height: 50%;
    padding: 5px 0;
}
.phone_part_five_left_img img,
.phone_part_five_right_img img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
/*****************修改头部***********************/
.transitionBody > div {
    overflow: auto;
}
.index_head {
    right: 10px;
    display: block;
}
.index_head:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.control_sanjiao::after {
    position: absolute;
    content: " ";
    top: 16px;
    left: -16px;
    display: block;
    width: 0;
    height: 0;
    border: 8px solid #f8f8f8;
    border-color: transparent #e0dbdb transparent transparent;
    z-index: 111;
}
.index_control {
    position: absolute;
    left: 400px;
}
.control_item {
    position: absolute;
    width: 630px;
    padding: 10px 10px 80px 10px;
    background-color: #f8f8f8;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    margin-top: 65px;
}
.img_nav {
    width: 200px;
    height: 100px;
    position: relative;
    padding: 1px;
    border: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.phone_shop {
    width: 100%;
    border: 1px solid transparent;
}
.phone_shop:hover {
    border: 1px dashed red;
}
.phone_shop_body {
    width: 95%;
    margin: 0 auto;
    position: relative;
}
.phone_title_shop {
    width: 95%;
    height: 50px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.phone_title_left {
    width: 70%;
}
.phone_title_left p {
    font-size: 20px;
    color: #2f2f2f;
    font-weight: bold;
    text-align: left;
}
.phone_title_left span {
    font-size: 14px;
    color: #d4d4d4;
    font-weight: 400;
}
.phone_title_right {
    width: 30%;
}
.phone_title_right p {
    font-size: 18px;
    color: #cccccc;
    font-weight: bold;
    text-align: right;
}
.phone_shop_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.phone_shop_left,
.phone_shop_right {
    width: 50%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
}
.phone_shop_item {
    width: 95%;
    border-radius: 5px;
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
}
.shop_item_top {
    width: 100%;
    position: relative;
}
.shop_item_top img {
    width: 100%;
}

.shop_item_title p {
    font-size: 12px;
    color: #000000;
    text-align: justify;
    text-justify: inter-character;
    line-height: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.shop_item_title span {
    font-size: 12px;
    padding: 0 5px;
    background-color: #fd0036;
    border-radius: 5px;
    color: white;
}
.shop_item_label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.shop_item_label span {
    font-size: 12px;
    padding: 0 4px;
    margin: 5px 0;
    border-radius: 5px;
    border: 1px solid red;
    color: red;
}
.shop_item_label span:nth-of-type(1) {
    border: 1px solid #fc022f;
    color: #fc022f;
}
.shop_item_label span:nth-of-type(2) {
    border: 1px solid #fac831;
    color: #fac831;
}
.shop_item_label span:nth-of-type(3) {
    border: 1px solid #54b5e2;
    color: #54b5e2;
}
.shop_item_price {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 5px 0;
}
.shop_item_price p:nth-of-type(1) {
    font-size: 18px;
    color: #fc022f;
    font-weight: 400;
}
.shop_item_price p:nth-of-type(2) {
    font-size: 12px;
    color: #959595;
}
.hone_switch {
    width: 200px;
    /*height: 50px;*/
}
.el-switch__core {
    height: 30px;
    border-radius: 20px;
}
.el-switch__core:after {
    width: 27px;
    height: 27px;
}
.el-switch.is-checked .el-switch__core::after {
    left: 100%;
    margin-left: -26px;
}
.add {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 80px;
}
.phone_copyright {
    width: 100%;
    background-color: white;
    height: 50px;
    border: 1px solid transparent;
    position: relative;
}
.phone_copyright:hover {
    border: 1px dashed red;
}
.phone_copyright_box {
    width: 100%;
    height: 50px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    color: #cccccc;
    letter-spacing: 2px;
}
.phone_bottom {
    width: 100%;
    background-color: white;
    height: 60px;
    border: 1px solid transparent;
    position: relative;
}
.phone_bottom:hover {
    border: 1px dashed red;
}
.phone_bottom_box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}
.phone_bottom_item {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.phone_bottom_item_img {
    width: 25px;
}
.phone_bottom_item_img img {
    width: 100%;
}
.phone_bottom_item p {
    font-size: 12px;
    color: #7c7e82;
}
.shop-video-icon {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: auto;
    display: flex;
    padding: 10px;
    z-index: 4;
    > div {
        display: flex;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
    }
    img {
        width: 30px !important;
        height: 30px;
    }
}
.phone_news {
    width: 100%;
    border: 1px solid transparent;
    background: #fff;
}
.phone_news:hover {
    border: 1px dashed red;
}
.phone_news_body {
    width: 92%;
    margin: 0 auto;
    position: relative;
}
.news_list_item {
    width: 100%;
    background-color: white;
    height: 95px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}
.news_list_item_right {
    width: 35%;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
}
.news_list_item_right img {
    width: 100%;
    height: 100%;
}
.news_list_item_left {
    width: 65%;
    height: 80px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding-right: 10px;
}
.news_list_item_left p {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.news_list_item_other {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.news_list_item_other span {
    font-size: 12px;
    color: #a8a8a8;
}
.news_list_item_otherspan:nth-of-type(1) {
    display: flex;
    height: 20px;
    align-items: center;
}

.live_index_live_body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .live_index_live_item_box:nth-child(odd) {
        padding-right: 5px;
    }
    .live_index_live_item_box:nth-child(even) {
        padding-left: 5px;
    }
    // .live_index_live_item_box {
    //     padding-right: 8px;
    // }
    .live_index_live_item_box {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        margin-bottom: 10px;
    }

    .live_index_live_item {
        width: 100%;
        border-radius: 10px;
        overflow: hidden;

        background-color: #ffffff;
        .live_index_live_item_img {
            width: 100%;
            position: relative;
            img {
                width: 100%;
            }
            > span {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                right: 10px;
                bottom: 10px;
                font-size: 12px;
                color: #ffffff;
            }
        }
        .live_index_live_item_content {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            line-height: 1;
            .live_index_live_item_content_left {
                width: 55%;
                height: 70px;
                display: flex;
                flex-flow: column;
                justify-content: space-between;
                align-items: flex-start;
                > p {
                    width: 100%;
                    font-size: 12px;
                    line-height: 16px;
                    font-weight: bold;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    //隐藏行数
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                > div {
                    width: 100%;
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: flex-start;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        margin-right: 5px;
                    }
                    p {
                        flex: 1;
                        font-size: 10px;
                        color: #515151;
                        overflow: hidden;
                        //隐藏部分显示为省略号
                        text-overflow: ellipsis;
                        //禁止文本自动换行
                        white-space: nowrap;
                    }
                }
            }
            .live_index_live_item_content_right {
                width: 35%;
                height: 70px;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                background-color: #f7f7f7;
                img {
                    width: 100%;
                }
                span {
                    font-size: 10px;
                    color: #000000;
                    line-height: 20px;
                }
            }
        }
    }
}
</style>
